<template>
	<view class="yxyl-album-tabs-container">
		<view class="tabs-container" id="tabsContainer">
			<view class="tab-left">
				<tui-tabs :tabs="tabs" itemWidth="50%" selectedColor="#F44336" sliderBgColor="#F44336" :sliderWidth="150" :currentTab="innerCurrentTab" @change="change"></tui-tabs>
			</view>
			
		</view>

		<view class="tabs-content-contanier" v-for="(item, index) in tabs" :key="index" v-show="innerCurrentTab == index" :style="{ height: scrollHeight }">
			<slot v-if="index == 0" name="slot_1"></slot>
			<slot v-if="index == 1" name="slot_2"></slot>
		</view>
	
	</view>
</template>

<script>
import tuiTabs from '@/components/tui-tabs/tui-tabs';
import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';
import MescrollUni from 'mescroll-uni';
export default {
	components: {
		tuiTabs,
		faIcon,
		MescrollUni	
	},
	data() {
		return {
			innerCurrentTab: this.currentTab,
			windowHeight: uni.getSystemInfoSync().windowHeight
		};
	},

	props: {
		tabs: {
			type: Array,
			default() {
				return [];
			}
		},
		currentTab: {
			type: Number,
			default: 1
		},
		top: {
			type: Number,
			default: 0
		},
		bottom: {
			type: Number,
			default: 0
		},
		shareSaleCash: {
			type: Number,
			default: 0
		}
	},
	computed: {
		scrollHeight: function() {
			return this.windowHeight - this.top - this.bottom - 20 + 'px';
		}
		
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		query
			.select('#tabsContainer')
			.boundingClientRect(data => {
				this.windowHeight = this.windowHeight - data.height;
			})
			.exec();
	},
	methods: {
		change: function(e) {
			this.innerCurrentTab = e.index;
			this.$emit('change', e.index);
		}
		
	}
};
</script>

<style lang="scss" scoped>
.yxyl-album-tabs-container {
	width: 100%;
	.tabs-container {
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		height: 50rpx;
		border-bottom: 1px solid #c0c0c0;
		.tab-left {
			width: 100%;
			height: 100%;
			flex-grow: 1;
		}		
	}
	.tabs-content-contanier {
		padding-bottom: 100rpx;
	}
}
</style>
